<template>
    <div class="box">
        <HeadSearch></HeadSearch>
        <!--轮播-->
        <div class="header">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in bannerItems" :key="index">
                    <router-link to="">
                        <img :src="item.img">
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="tickets-menu">
            <van-dropdown-menu active-color="#28DBC7">
                <van-dropdown-item v-model="value1" :options="option1"/>
                <van-dropdown-item v-model="value2" :options="option2"/>
            </van-dropdown-menu>
        </div>
        <div class="tickets-main pa-20">
            <div class="label-box" :class="{active:!isExpand}">
                <div v-for="item in typeItems" :key="item.id">
                    <input type="radio" name="type" :id="item.id">
                    <label :for="item.id">{{item.label}}</label>
                </div>
            </div>
            <span v-if="isExpand" class="expand" @click="isExpand = !isExpand"><span>展开</span><van-icon
                    name="play"/></span>
            <span class="packUp" v-else @click="isExpand = !isExpand"><span>收起</span><van-icon name="play"/></span>
        </div>
        <div class="list-box pa-20">
            <router-link to="/tickets/details" v-for="(item,index) in listItems" :key="index">
                <i><img :src="item.img"></i>
                <div class="list-main">
                    <b class="multi-line "> {{item.name}}</b>
                    <p class="only-1"><span v-for="(tag , key) in item.tag" :key="key">{{tag}}</span></p>
                    <div><span>¥<b>{{item.price}}</b></span><del>¥{{item.oldPrice}}</del></div>
                </div>
            </router-link>
        </div>
        <Navbar :nav="0"></Navbar>
    </div>
</template>

<script>
    import Navbar from '@/components/navbar/navbar';//导航
    import HeadSearch from '@/components/headSearch/headSearch';//头部搜索
    import bannerImg from '@/assets/temporary/tickets-banner.png';//banner图
    import ticketsImg from '../../assets/temporary/ticketsImg.png';//列表图
    export default {
        name: "index",
        components: {
            Navbar, HeadSearch
        },
        data() {
            return {
                //轮播
                bannerItems: [
                    {img: bannerImg,},
                    {img: bannerImg,},
                    {img: bannerImg,},
                ],
                value1: 0,
                value2: 'a',
                option1: [
                    {text: '景点', value: 0},
                    {text: '新款商品', value: 1},
                    {text: '活动商品', value: 2}
                ],
                option2: [
                    {text: '智能排序', value: 'a'},
                    {text: '价格排序', value: 'b'},
                    {text: '销量排序', value: 'c'},
                ],
                typeItems: [
                    {id: 'a2', label: '遛娃'}, {id: 'a1', label: '遛其他什么'},
                    {id: 'a0', label: '陪爸妈'}, {id: 'a4', label: '情侣约会'},
                    {id: 'a3', label: '拍照'}
                ],
                isExpand: true,//展开收起切换
                //景点列表
                listItems:[
                    {img:ticketsImg,name:`郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票`,price:'98',oldPrice:'102',tag:['游乐场','亲子','什么玩意']},
                    {img:ticketsImg,name:`郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票`,price:'98',oldPrice:'102',tag:['游乐场','亲子','什么玩意']},
                    {img:ticketsImg,name:`郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票`,price:'98',oldPrice:'102',tag:['游乐场','亲子','什么玩意']},
                    {img:ticketsImg,name:`郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票`,price:'98',oldPrice:'102',tag:['游乐场','亲子','什么玩意']},
                    {img:ticketsImg,name:`郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票`,price:'98',oldPrice:'102',tag:['游乐场','亲子','什么玩意']},
                    {img:ticketsImg,name:`郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票`,price:'98',oldPrice:'102',tag:['游乐场','亲子','什么玩意']}
                ]
            }
        },
    }
</script>

<style scoped lang="scss">
    @import "@/assets/css/public";
    .box {
        padding-bottom: vw(120);
    }
    .tickets-main {
        display: flex;
        align-items: flex-start;
        overflow: hidden;

        > span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: vw(118);
            padding: vw(10) 0;
            margin-left: vw(16);
            margin-top: vw(14);
            font-size: vw(24);
            border-radius: vw(42);
            background-color: $gray_bg;
            &.packUp {
                background-color: transparent;
                i {
                    transform: rotate(-90deg);
                }
            }

            i {
                margin-left: vw(10);
                margin-right: vw(30);
                transform: rotate(90deg);
                font-size: vw(24);
                color: #999;
            }
        }
    }

    .label-box {
        display: flex;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;

        &.active {
            flex-wrap: wrap;
        }
        div{
            margin:vw(14) vw(16) vw(14) 0;
        }
        input {
            display: none;

            &:checked + label {
                color: #fff;
                background-color: $green;
            }
        }

        label {
            padding: vw(10) vw(20);
            font-size: vw(24);
            border-radius: vw(42);
            background-color: $gray_bg;
            white-space: nowrap;
        }
    }
    .list-box{
        a{
            display: flex;
            align-items: center;
            padding: vw(30) 0;
            border-bottom: 1px solid $gray_bg;
            &:first-of-type{
                padding-top: 0;
            }
            i{
                width: vw(220);
                border-radius: vw(10);
                overflow: hidden;
            }
            .list-main{
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 0 vw(16) 0 vw(24);
                overflow: hidden;
                b{
                    font-size: vw(28);
                    line-height: vw(42);
                    -webkit-line-clamp: 2;
                }
                p{
                    color: $green;
                    font-size: vw(20);
                    /*height: vw(30);*/
                    margin: 0;
                    padding: 0;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    span{
                        height: vw(28);
                        padding:0 vw(10);
                        margin-right: vw(10);
                        line-height: vw(60);
                        border: 1px solid $green;
                        border-radius: vw(6);
                    }
                }
                >div{
                    del{
                        margin-left: vw(10);
                        color: #999;
                        font-size: vw(20);
                    }
                    span{
                        color: $org_font;
                        font-size: vw(28);
                        b{
                            color: vw(42);
                        }
                    }
                }
            }
        }
    }
</style>
